<template>
  <view class="head bar-h">
    <view class="name">{{ deviceStore.MyShop.shopName }}</view>
    <view class="icon">
      <image
        class="icon"
        v-if="level == 'A'"
        src="/static/images/user/A.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else-if="level == 'B'"
        src="/static/images/user/B.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else-if="level == 'C'"
        src="/static/images/user/C.png"
        mode="widthFix"
      ></image>
      <image
        class="icon"
        v-else
        src="/static/images/user/C.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="num">{{ deviceStore.MyShop.bankAccountNumber }}</view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useDeviceStore } from "../../../store";

const deviceStore = useDeviceStore();
const level = ref("A");

// 跳转至个人信息页面

onMounted(() => {
  level.value = deviceStore.MyShop.shopGrade;
});
</script>

<style lang="scss" scoped>
.head {
  background: #004b41;
  min-height: 132px;
  border-radius: 0px 0 13px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  margin-bottom: 20rpx;
  .name {
    display: flex;
    align-items: flex-end;
    line-height: 80px;
  }
  image {
    width: 90px;
    height: 105px;
  }
  .num {
    margin: 30rpx 0;
  }
}
</style>
